import React, { useState } from'react';
import { Table, DatePicker, Button, Select, Modal, Form, Input, Tabs } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import styles from './Yujing.module.less';

interface DataType {
  key: string;
  name: string;
  threshold: string;
  values: number;
  range: string;
  level: string;
  startTime: string;
  endTime: string;
}

const Yujing: React.FC = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();
  const [data, setData] = useState<DataType[]>([
    {
      key: '1',
      name: '渗压测点1',
      threshold: '超阈值预警',
      values: 40,
      range: '10<X<30',
      level: '--',
      startTime: '2022-04-20 15:00',
      endTime: '2022-04-20 15:00',
    },
  ]);

  const columns: ColumnsType<DataType> = [
    {
      title: '排名',
      dataIndex: 'key',
      width: 80,
      align: 'center',
    },
    {
      title: '测点名称',
      dataIndex: 'name',
      width: 150,
    },
    {
      title: '预警类型',
      dataIndex: 'threshold',
      width: 100,
      align: 'center',
      render: (text) => (
        <span style={{ color: text === '超阈值预警'? '#FF0000' : '#28B916' }}>
          {text}
        </span>
      ),
    },
    {
      title: '监测数值',
      dataIndex: 'values',
      width: 110,
      align: 'center',
    },
    {
      title: '监测范围',
      dataIndex: 'range',
      width: 150,
      align: 'center',
    },
    {
      title: '经纬度',
      dataIndex: 'level',
      width: 100,
      align: 'center',
    },
    {
      title: '预警开始时间',
      dataIndex:'startTime',
      width: 180,
    },
    {
      title: '预警结束时间',
      dataIndex: 'endTime',
      width: 180,
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      align: 'center',
      render: () => <a>查看</a>,
    },
  ];

  const headerData = [
    { label: '南明水厂', total: 30, running: 28, stopped: 2 },
    { label: '水质监测站', total: 30, running: 28, stopped: 2 },
    { label: '水质监测站', total: 30, running: 28, stopped: 2 },
    { label: '增压泵站', total: 30, running: 28, stopped: 2 },
    { label: '安全监测', total: 30, running: 28, stopped: 2 },
    { label: '视频监控站', total: 30, running: 28, stopped: 2 },
  ];

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    form.validateFields().then((values) => {
      const newData: DataType = {
        key: (data.length + 1).toString(),
        name: values.name,
        threshold: values.threshold,
        values: values.values,
        range: values.range,
        level: values.level,
        startTime: values.startTime,
        endTime: values.endTime,
      };
      setData([...data, newData]);
      setVisible(false);
      form.resetFields();
    });
  };

  const handleCancel = () => {
    setVisible(false);
    form.resetFields();
  };

  const thresholdOptions = [
    { value: '超阈值预警', label: '超阈值预警' },
    { value: '未超阈值预警', label: '未超阈值预警' },
  ];

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.cards}>
          {headerData.map((item, index) => (
            <div key={index} className={styles.card}>
              <div className={styles.title}>{item.label}</div>
              <div className={styles.stats}>
                <div>
                  <span className={styles.total}>{item.total}</span>
                  <span className={styles.label}>总数</span>
                </div>
                <div>
                  <span className={styles.running}>{item.running}</span>
                  <span className={styles.label}>运行</span>
                </div>
                <div>
                  <span className={styles.stopped}>{item.stopped}</span>
                  <span className={styles.label}>未运行</span>
                </div>
              </div>
              <div className={styles.more} onClick={() => setVisible(true)}>阀值设置</div>
            </div>
          ))}
        </div>
      </div>

      <div className={styles.content}>
        <div className={styles.filter}>
          <div className={styles.filterItem}>
            <span>计划时间：</span>
            <DatePicker.RangePicker />
          </div>
          <div className={styles.filterItem}>
            <span>资源类型：</span>
            <Select
              style={{ width: 200 }}
              placeholder="请选择"
              options={[
                { value: 'all', label: '全部' },
                { value: 'water', label: '水厂' },
                { value: 'pump', label: '泵站' },
              ]}
            />
          </div>
          <Button type="primary">查询</Button>
          <Button>重置</Button>
          <Button type="primary" onClick={showModal}>添加</Button>
        </div>

        <Table
          columns={columns}
          dataSource={data}
          pagination={{
            current: currentPage,
            pageSize: 6,
            total: data.length,
            onChange: (page) => setCurrentPage(page),
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
          }}
        />

        <Modal
          title="监测阈值设置(安全监测)"
          open={visible}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <Tabs>
            <Tabs.TabPane tab="渗压监测" key="seepage">
              <Form form={form}>
                <Form.Item label="压力">
                  <Input placeholder="请输入" />
                  <span>&lt;X</span>
                  <Input placeholder="请输入" />
                </Form.Item>
                <Form.Item label="温度">
                  <Input placeholder="请输入" />
                  <span>&lt;X</span>
                  <Input placeholder="请输入" />
                </Form.Item>
              </Form>
            </Tabs.TabPane>
            <Tabs.TabPane tab="变形监测" key="deformation">
              {/* 这里可以添加变形监测的具体表单内容 */}
            </Tabs.TabPane>
            <Tabs.TabPane tab="沉降监测" key="settlement">
              {/* 这里可以添加沉降监测的具体表单内容 */}
            </Tabs.TabPane>
            <Tabs.TabPane tab="震动监测" key="vibration">
              {/* 这里可以添加震动监测的具体表单内容 */}
            </Tabs.TabPane>
          </Tabs>
        </Modal>
      </div>
    </div>
  );
};

export default Yujing;